// Ant Design 主题变量定制
// 更多变量请参考：https://ant.design/docs/react/customize-theme-cn

// 基础色彩
@primary-color: #1890ff; // 全局主色
@link-color: #1890ff; // 链接色
@success-color: #52c41a; // 成功色
@warning-color: #faad14; // 警告色
@error-color: #ff4d4f; // 错误色
@info-color: #1890ff; // 信息色
@processing-color: @primary-color; // 处理中颜色

// 字体
@font-size-base: 14px; // 主字号
@font-size-lg: 16px; // 大字号
@font-size-sm: 12px; // 小字号
@font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', 'Helvetica Neue', Helvetica, Arial, sans-serif;

// 圆角
@border-radius-base: 6px; // 组件/浮层圆角
@border-radius-sm: 4px; // 小圆角
@border-radius-lg: 8px; // 大圆角

// 边框颜色
@border-color-base: #d9d9d9; // 基础边框色
@border-color-split: hsv(0, 0, 94%); // 分割线色
@border-width-base: 1px; // 边框宽度
@border-style-base: solid; // 边框样式

// 背景色
@body-background: #fff; // body 背景色
@component-background: #fff; // 组件背景色
@popover-background: #fff; // 弹出层背景色
@layout-body-background: #f0f2f5; // 布局背景色
@layout-header-background: #001529; // 顶部导航背景色
@layout-footer-background: @layout-body-background; // 底部导航背景色
@layout-sider-background: @layout-header-background; // 侧边栏背景色
@layout-trigger-background: #002140; // 侧边栏底部触发器背景色

// 文字色
@text-color: rgba(0, 0, 0, 0.85); // 主文本色
@text-color-secondary: rgba(0, 0, 0, 0.65); // 次文本色
@text-color-inverse: #fff; // 反色文本色
@icon-color: inherit; // 图标色
@icon-color-hover: rgba(0, 0, 0, 0.75); // 图标悬停色
@heading-color: rgba(0, 0, 0, 0.85); // 标题色
@text-color-dark: fade(#fff, 85%); // 暗色文本色
@text-color-secondary-dark: fade(#fff, 65%); // 暗色次文本色

// 阴影
@shadow-1-up: 0 -6px 16px -8px rgba(0, 0, 0, 0.08), 0 -9px 28px 0 rgba(0, 0, 0, 0.05), 0 -12px 48px 16px rgba(0, 0, 0, 0.03);
@shadow-1-down: 0 6px 16px -8px rgba(0, 0, 0, 0.08), 0 9px 28px 0 rgba(0, 0, 0, 0.05), 0 12px 48px 16px rgba(0, 0, 0, 0.03);
@shadow-1-left: -6px 0 16px -8px rgba(0, 0, 0, 0.08), -9px 0 28px 0 rgba(0, 0, 0, 0.05), -12px 0 48px 16px rgba(0, 0, 0, 0.03);
@shadow-1-right: 6px 0 16px -8px rgba(0, 0, 0, 0.08), 9px 0 28px 0 rgba(0, 0, 0, 0.05), 12px 0 48px 16px rgba(0, 0, 0, 0.03);
@shadow-2: 0 3px 6px -4px rgba(0, 0, 0, 0.12), 0 6px 16px 0 rgba(0, 0, 0, 0.08), 0 9px 28px 8px rgba(0, 0, 0, 0.05);

// 动画时长
@animation-duration-slow: 0.3s; // 慢速动画时长
@animation-duration-base: 0.2s; // 基础动画时长
@animation-duration-fast: 0.1s; // 快速动画时长

// 尺寸
@height-base: 32px; // 基础组件高度
@height-lg: 40px; // 大尺寸组件高度
@height-sm: 24px; // 小尺寸组件高度

// 间距
@padding-lg: 24px; // 大间距
@padding-md: 16px; // 中间距
@padding-sm: 12px; // 小间距
@padding-xs: 8px; // 超小间距
@padding-xss: 4px; // 极小间距

@margin-lg: 24px; // 大外边距
@margin-md: 16px; // 中外边距
@margin-sm: 12px; // 小外边距
@margin-xs: 8px; // 超小外边距
@margin-xss: 4px; // 极小外边距

// 栅格系统
@grid-columns: 24; // 栅格列数
@grid-gutter-width: 0; // 栅格间距

// Z-index
@zindex-base: auto;
@zindex-affix: 10;
@zindex-back-top: 10;
@zindex-picker-panel: 10;
@zindex-popup-close: 10;
@zindex-modal: 1000;
@zindex-modal-mask: 1000;
@zindex-message: 1010;
@zindex-notification: 1010;
@zindex-popover: 1030;
@zindex-dropdown: 1050;
@zindex-picker: 1050;
@zindex-popoconfirm: 1060;
@zindex-tooltip: 1070;
@zindex-image: 1080;

// 按钮
@btn-font-weight: 400;
@btn-border-radius-base: @border-radius-base;
@btn-border-radius-sm: @border-radius-sm;
@btn-border-radius-lg: @border-radius-lg;
@btn-border-width: @border-width-base;
@btn-border-style: @border-style-base;
@btn-shadow: 0 2px 0 rgba(0, 0, 0, 0.015);
@btn-primary-shadow: 0 2px 0 rgba(0, 0, 0, 0.045);
@btn-text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.12);

@btn-primary-color: #fff;
@btn-primary-bg: @primary-color;
@btn-primary-border: @primary-color;

@btn-default-color: @text-color;
@btn-default-bg: @component-background;
@btn-default-border: @border-color-base;

@btn-danger-color: #fff;
@btn-danger-bg: @error-color;
@btn-danger-border: @error-color;

@btn-disable-color: @disabled-color;
@btn-disable-bg: @disabled-bg;
@btn-disable-border: @border-color-base;

@btn-default-ghost-color: @component-background;
@btn-default-ghost-bg: transparent;
@btn-default-ghost-border: @component-background;

@btn-font-size-lg: @font-size-lg;
@btn-font-size-sm: @font-size-sm;
@btn-padding-horizontal-base: @padding-md - 1px;
@btn-padding-horizontal-lg: @btn-padding-horizontal-base;
@btn-padding-horizontal-sm: @padding-xs - 1px;

@btn-height-base: @height-base;
@btn-height-lg: @height-lg;
@btn-height-sm: @height-sm;

@btn-line-height: @line-height-base;

// 禁用状态
@disabled-color: rgba(0, 0, 0, 0.25);
@disabled-bg: @background-color-light;
@disabled-active-bg: tint(@black, 90%);
@disabled-color-dark: rgba(255, 255, 255, 0.35);

// 输入框
@input-height-base: @height-base;
@input-height-lg: @height-lg;
@input-height-sm: @height-sm;
@input-padding-horizontal: @control-padding-horizontal - 1px;
@input-padding-horizontal-base: @input-padding-horizontal;
@input-padding-horizontal-sm: @control-padding-horizontal-sm - 1px;
@input-padding-horizontal-lg: @input-padding-horizontal;
@input-padding-vertical-base: max(round((@input-height-base - @font-size-base * @line-height-base) / 2 * 10) / 10 - @border-width-base, 3px);
@input-padding-vertical-sm: max(round((@input-height-sm - @font-size-base * @line-height-base) / 2 * 10) / 10 - @border-width-base, 0);
@input-padding-vertical-lg: ceil((@input-height-lg - @font-size-lg * @line-height-base) / 2 * 10) / 10 - @border-width-base;
@input-placeholder-color: hsv(0, 0, 75%);
@input-color: @text-color;
@input-icon-color: @disabled-color;
@input-border-color: @border-color-base;
@input-bg: @component-background;
@input-number-hover-border-color: @input-hover-border-color;
@input-number-handler-active-bg: #f4f4f4;
@input-number-handler-hover-bg: @primary-5;
@input-number-handler-bg: @component-background;
@input-number-handler-border-color: @border-color-base;
@input-addon-bg: @background-color-light;
@input-hover-border-color: @primary-5;
@input-disabled-bg: @disabled-bg;
@input-outline-offset: 0 0;
@input-icon-hover-color: fade(@black, 85%);
@input-disabled-color: @disabled-color;

// 卡片
@card-head-color: @heading-color;
@card-head-background: transparent;
@card-head-font-size: @font-size-lg;
@card-head-font-size-sm: @font-size-base;
@card-head-padding: 16px;
@card-head-padding-sm: @card-head-padding / 2;
@card-head-height: 48px;
@card-head-height-sm: 36px;
@card-inner-head-padding: 12px;
@card-padding-base: 24px;
@card-padding-base-sm: @card-padding-base / 2;
@card-actions-background: @component-background;
@card-actions-li-margin: 12px 0;
@card-skeleton-bg: #cfd8dc;
@card-background: @component-background;
@card-shadow: 0 1px 2px -2px rgba(0, 0, 0, 0.16), 0 3px 6px 0 rgba(0, 0, 0, 0.12), 0 5px 12px 4px rgba(0, 0, 0, 0.09);
@card-radius: @border-radius-base;
@card-head-tabs-margin-bottom: -17px;
@card-head-extra-color: @text-color;

// 表格
@table-header-bg: @background-color-light;
@table-header-color: @heading-color;
@table-header-sort-bg: @background-color-base;
@table-body-sort-bg: rgba(0, 0, 0, 0.01);
@table-row-hover-bg: @background-color-light;
@table-selected-row-color: inherit;
@table-selected-row-bg: @primary-1;
@table-body-selected-sort-bg: @table-selected-row-bg;
@table-selected-row-hover-bg: darken(@table-selected-row-bg, 2%);
@table-expanded-row-bg: #fbfbfb;
@table-padding-vertical: 16px;
@table-padding-horizontal: 16px;
@table-padding-vertical-md: @table-padding-vertical * 3 / 4;
@table-padding-horizontal-md: @table-padding-horizontal / 2;
@table-padding-vertical-sm: @table-padding-vertical / 2;
@table-padding-horizontal-sm: @table-padding-horizontal / 2;
@table-border-color: @border-color-split;
@table-border-radius-base: @border-radius-base;
@table-footer-bg: @background-color-light;
@table-footer-color: @heading-color;
@table-header-bg-sm: @table-header-bg;
@table-font-size: @font-size-base;
@table-font-size-md: @table-font-size;
@table-font-size-sm: @table-font-size;
@table-header-cell-split-color: rgba(0, 0, 0, 0.06);

// 其他变量
@line-height-base: 1.5715;
@background-color-light: hsv(0, 0, 98%);
@background-color-base: hsv(0, 0, 96%);
@control-padding-horizontal: 12px;
@control-padding-horizontal-sm: 8px;